<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<uni-icons type="left" size="24" color="#2c3e50"></uni-icons>
				<text class="back-text">取消</text>
			</view>
			<text class="header-title">写消息</text>
			<view class="header-right" @click="sendMessage">
				<text class="send-text">发送</text>
			</view>
		</view>
		
		<!-- 消息内容 -->
		<scroll-view scroll-y class="message-form">
			<!-- 收件人 -->
			<view class="form-section">
				<text class="form-label">收件人</text>
				<view class="recipient-list">
					<view class="recipient-item" v-for="(recipient, index) in recipients" :key="index">
						<text class="recipient-name">{{ recipient.name }}</text>
						<uni-icons type="close" size="16" color="#e74c3c" @click="removeRecipient(index)"></uni-icons>
					</view>
					<view class="add-recipient" @click="addRecipient">
						<uni-icons type="plus" size="16" color="#3498db"></uni-icons>
						<text>添加收件人</text>
					</view>
				</view>
			</view>
			
			<!-- 消息类型 -->
			<view class="form-section">
				<text class="form-label">消息类型</text>
				<view class="type-list">
					<view class="type-item" :class="{ active: messageType === 'alert' }" @click="selectType('alert')">
						<uni-icons type="sound" size="20" color="#e74c3c"></uni-icons>
						<text>告警通知</text>
					</view>
					<view class="type-item" :class="{ active: messageType === 'maintenance' }" @click="selectType('maintenance')">
						<uni-icons type="gear" size="20" color="#f39c12"></uni-icons>
						<text>维护通知</text>
					</view>
					<view class="type-item" :class="{ active: messageType === 'report' }" @click="selectType('report')">
						<uni-icons type="bar-chart" size="20" color="#3498db"></uni-icons>
						<text>报告通知</text>
					</view>
					<view class="type-item" :class="{ active: messageType === 'meeting' }" @click="selectType('meeting')">
						<uni-icons type="calendar" size="20" color="#9b59b6"></uni-icons>
						<text>会议通知</text>
					</view>
				</view>
			</view>
			
			<!-- 消息标题 -->
			<view class="form-section">
				<text class="form-label">消息标题</text>
				<input 
					class="form-input" 
					v-model="messageTitle" 
					placeholder="请输入消息标题"
					placeholder-style="color: #95a5a6"
				/>
			</view>
			
			<!-- 消息内容 -->
			<view class="form-section">
				<text class="form-label">消息内容</text>
				<textarea 
					class="form-textarea" 
					v-model="messageContent" 
					placeholder="请输入消息内容"
					placeholder-style="color: #95a5a6"
					:maxlength="1000"
				></textarea>
				<text class="char-count">{{ messageContent.length }}/1000</text>
			</view>
			
			<!-- 优先级 -->
			<view class="form-section">
				<text class="form-label">优先级</text>
				<view class="priority-list">
					<view class="priority-item" :class="{ active: priority === 'low' }" @click="selectPriority('low')">
						<view class="priority-dot low"></view>
						<text>低</text>
					</view>
					<view class="priority-item" :class="{ active: priority === 'medium' }" @click="selectPriority('medium')">
						<view class="priority-dot medium"></view>
						<text>中</text>
					</view>
					<view class="priority-item" :class="{ active: priority === 'high' }" @click="selectPriority('high')">
						<view class="priority-dot high"></view>
						<text>高</text>
					</view>
				</view>
			</view>
			
			<!-- 附件 -->
			<view class="form-section">
				<text class="form-label">附件</text>
				<view class="attachment-list">
					<view class="attachment-item" v-for="(attachment, index) in attachments" :key="index">
						<uni-icons type="paperclip" size="20" color="#3498db"></uni-icons>
						<text class="attachment-name">{{ attachment.name }}</text>
						<uni-icons type="close" size="16" color="#e74c3c" @click="removeAttachment(index)"></uni-icons>
					</view>
					<view class="add-attachment" @click="addAttachment">
						<uni-icons type="plus" size="16" color="#3498db"></uni-icons>
						<text>添加附件</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const messageType = ref('alert')
const messageTitle = ref('')
const messageContent = ref('')
const priority = ref('medium')
const recipients = ref([
	{ name: '技术部', id: 'tech' },
	{ name: '管理层', id: 'management' }
])
const attachments = ref([])

// 页面加载
onMounted(() => {
	// 如果是回复消息，加载原消息内容
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options
	if (options.replyId) {
		loadReplyMessage(options.replyId)
	}
})

// 加载回复消息
const loadReplyMessage = (replyId) => {
	console.log('加载回复消息:', replyId)
	// 实际项目中会从后端API获取原消息内容
	messageTitle.value = 'Re: 系统告警'
	messageContent.value = '\n\n--- 原消息 ---\n监测点003设备离线，请及时处理。'
}

// 返回上一页
const goBack = () => {
	uni.showModal({
		title: '确认退出',
		content: '确定要退出吗？未保存的内容将丢失。',
		success: (res) => {
			if (res.confirm) {
				uni.navigateBack()
			}
		}
	})
}

// 发送消息
const sendMessage = () => {
	if (!messageTitle.value.trim()) {
		uni.showToast({
			title: '请输入消息标题',
			icon: 'none'
		})
		return
	}
	
	if (!messageContent.value.trim()) {
		uni.showToast({
			title: '请输入消息内容',
			icon: 'none'
		})
		return
	}
	
	if (recipients.value.length === 0) {
		uni.showToast({
			title: '请选择收件人',
			icon: 'none'
		})
		return
	}
	
	uni.showLoading({ title: '发送中...' })
	
	// 模拟发送
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '发送成功',
			icon: 'success'
		})
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}, 2000)
}

// 添加收件人
const addRecipient = () => {
	uni.showActionSheet({
		itemList: ['技术部', '管理层', '运维部', '数据分析部', '项目经理'],
		success: (res) => {
			const recipientNames = ['技术部', '管理层', '运维部', '数据分析部', '项目经理']
			const recipientIds = ['tech', 'management', 'ops', 'data', 'pm']
			
			const newRecipient = {
				name: recipientNames[res.tapIndex],
				id: recipientIds[res.tapIndex]
			}
			
			// 检查是否已存在
			const exists = recipients.value.some(r => r.id === newRecipient.id)
			if (!exists) {
				recipients.value.push(newRecipient)
			} else {
				uni.showToast({
					title: '收件人已存在',
					icon: 'none'
				})
			}
		}
	})
}

// 移除收件人
const removeRecipient = (index) => {
	recipients.value.splice(index, 1)
}

// 选择消息类型
const selectType = (type) => {
	messageType.value = type
}

// 选择优先级
const selectPriority = (level) => {
	priority.value = level
}

// 添加附件
const addAttachment = () => {
	uni.chooseFile({
		count: 1,
		type: 'file',
		success: (res) => {
			const file = res.tempFiles[0]
			attachments.value.push({
				name: file.name,
				size: file.size,
				path: file.path
			})
		}
	})
}

// 移除附件
const removeAttachment = (index) => {
	attachments.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f5f7fa;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #e5e5e5;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.header-left {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.back-text {
	font-size: 28rpx;
	color: #2c3e50;
}

.header-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #2c3e50;
}

.send-text {
	font-size: 28rpx;
	color: #3498db;
	font-weight: bold;
}

.message-form {
	flex: 1;
	padding: 20rpx;
}

.form-section {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.form-label {
	font-size: 28rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 20rpx;
	display: block;
}

.recipient-list {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.recipient-item {
	display: flex;
	align-items: center;
	padding: 10rpx 15rpx;
	background: #e3f2fd;
	border-radius: 20rpx;
	gap: 10rpx;
}

.recipient-name {
	font-size: 24rpx;
	color: #1976d2;
}

.add-recipient {
	display: flex;
	align-items: center;
	padding: 10rpx 15rpx;
	background: #f8f9fa;
	border: 2rpx dashed #3498db;
	border-radius: 20rpx;
	gap: 10rpx;
	transition: all 0.3s;
	
	&:active {
		background: #e3f2fd;
	}
}

.add-recipient text {
	font-size: 24rpx;
	color: #3498db;
}

.type-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15rpx;
}

.type-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	gap: 15rpx;
	transition: all 0.3s;
	
	&.active {
		background: #e3f2fd;
		border: 2rpx solid #3498db;
	}
	
	&:active {
		transform: scale(0.98);
	}
}

.type-item text {
	font-size: 24rpx;
	color: #2c3e50;
}

.form-input {
	width: 100%;
	height: 80rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 26rpx;
	color: #2c3e50;
}

.form-textarea {
	width: 100%;
	height: 200rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 26rpx;
	color: #2c3e50;
	line-height: 1.6;
}

.char-count {
	font-size: 22rpx;
	color: #95a5a6;
	text-align: right;
	margin-top: 10rpx;
	display: block;
}

.priority-list {
	display: flex;
	gap: 20rpx;
}

.priority-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	gap: 15rpx;
	transition: all 0.3s;
	
	&.active {
		background: #e3f2fd;
		border: 2rpx solid #3498db;
	}
	
	&:active {
		transform: scale(0.98);
	}
}

.priority-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	
	&.low {
		background: #27ae60;
	}
	
	&.medium {
		background: #f39c12;
	}
	
	&.high {
		background: #e74c3c;
	}
}

.priority-item text {
	font-size: 24rpx;
	color: #2c3e50;
}

.attachment-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.attachment-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	gap: 15rpx;
}

.attachment-name {
	font-size: 24rpx;
	color: #2c3e50;
	flex: 1;
}

.add-attachment {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border: 2rpx dashed #3498db;
	border-radius: 8rpx;
	gap: 15rpx;
	transition: all 0.3s;
	
	&:active {
		background: #e3f2fd;
	}
}

.add-attachment text {
	font-size: 24rpx;
	color: #3498db;
}
</style>
